<!doctype html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
    <script type="text/javascript" src="/_ah/channel/jsapi"></script>
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
    <link type="text/css" href="//ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css" rel="stylesheet" />
    <style>
      .label, .btn {
      text-transform: capitalize;
      }
      ul {
      list-style-type: none;
      margin-left: 0;
      }
      .badge {
      margin-left: 5px;
      }
      input[type=text] {
      width: 700px;
      }
    </style>
  </head>
  <body>
    <div class="container hero-unit">
      <h1>log2bq</h1>
      <p>a simple demo of App Engine log ingestion into BigQuery</p>
      <p>
    <ul>
	<li>versions:コンマを入れることで複数のバージョンが取得できます<input type="text" name="versions"></li>
	<li>startDate:収集開始日<input type="text" name="startDate" id="startDate"></li>
	<li>endDate:収集終了日<input type="text" name="endDate" id="endDate"></li>
	<li><button id="start" class="btn btn-primary">ingest log</button></li>
	</ul>
	<div id="pipelines"></div>
	<div id="query">
	  <ul>
	    <li><a href="#query" class="q">select status, count(*) as count from logs.requestlogs_{{ date }} group by status order by count desc limit 10;</a></li>
	    <li><a href="#query" class="q">select resource, count(*) as count from logs.requestlogs_{{ date }} group by resource order by count desc limit 10;</a></li>
	    <li><a href="#query" class="q">select resource, AVG(latency) as latency from logs.requestlogs_{{ date }} group by resource order by latency desc limit 10;</a></li>
	    <li><a href="#query" class="q">select resource, AVG(cost) as cost from logs.requestlogs_{{ date }} group by resource order by cost desc limit 10;</A></li>
	  </ul>
	  <ul>
	    <li><input type="text" name="query"></li>
            <li><button id="run" class="btn btn-success">run query</button></li>
	  </ul>
	  <ul id="results"></div>	
	</div>
      </p>
      <script type="text/javascript">
	  var channel_token = "{{ channel_token }}";
	  var channel = new goog.appengine.Channel(channel_token);
	  var socket = channel.open();
	  var last = {
	  };
	  socket.onmessage = function(message) {
	      var data = message.data.split(",", 2);
	      var pipeline = data[0];
	      var snippet = data[1];
	      var pipeline_ul = $("#" + pipeline);
	      if (pipeline_ul.length == 0) {
	        pipeline_ul = $("<ul>").attr("id", pipeline).appendTo("#pipelines");
	        last[pipeline] = {}
	      }
	      if (snippet != last[pipeline]["snippet"]) {
		  last[pipeline]["progress"] = 0;
		  last[pipeline]["snippet"] = snippet;
		  last[pipeline]["li"] = $("<li>").html(snippet).appendTo(pipeline_ul);
	      } else {
		  last[pipeline]["progress"]++;
		  last[pipeline]["li"].html(last[pipeline]["snippet"] + "<span class='badge'>" + last[pipeline]["progress"] + "</span>");
	      }
	  };
	  
	  $("#startDate").datepicker({dateFormat : "yy/mm/dd 00:00:00"});
	  $("#endDate").datepicker({dateFormat : "yy/mm/dd 00:00:00"});

	  $("#start").click(function() {
	  	var versions = $("input[name=versions]").val();
	  	var startDate = $("input[name=startDate]").val();
	  	var endDate = $("input[name=endDate]").val();

		var startDateTime = (new Date(startDate)).getTime();
		var endDateTime = (new Date(endDate)).getTime();
//		alert(versions);
//		alert(startDateTime);
//		alert(endDateTime);

	    $.post("/start", { versions:versions, startDateTime:startDateTime, endDateTime:endDateTime, }, function() {
	    });
	  });
	  $("#run").click(function() {
	    var query = $("input[name=query]").val();
	    var li = $("<li>").prependTo("#results");
	    var a = $("<a class='q' href='#query'>").appendTo(li).text(query);
	    var badge = $("<span class='badge'>").appendTo(li).text(0);
            var start_time = new Date();
	    var timer = setInterval(function() {
	      badge.text((new Date() - start_time)/1000.0);
	    }, 100);
	    $.post("/query", {query: query}, function(data) {
  	      clearInterval(timer);
	      var result = JSON.parse(data);
	      var table = $("<table class='table table-bordered table-striped table-condensed'>").attr("id", result.jobReference.jobId).appendTo(li);
	      var ref;
	      $.each(result.rows, function(i, row) {
		  var tr = $("<tr>").appendTo(table);
		  $.each(row.f, function(i, val) {
		    $("<td>").appendTo(tr).text(val.v);
		  });
		  if (query.toLowerCase().indexOf("desc") != -1) {
		    if (row.f.length == 2) {
			if (ref == undefined) {
			   ref = row.f[1].v;
			}
			var p = 100 * row.f[1].v / ref;
		        var gradient = "-webkit-linear-gradient(left , #FFA " + p + "%, transparent " + p + "%)";
			$("td:first", tr).css("background-image", gradient)
		    }
		  }
	      });
	    }).error(function(xhr) {
	     clearInterval(timer);
	     var e = JSON.parse(xhr.responseText)
	     $("<div class='alert alert-error'>").appendTo(li).text(e.error.message);
            });
	  });
          $("#query").delegate("a.q", "click", function() {
            $("input[name=query]").val($(this).text());
          });
      </script>
    </div>
  </body>
</html>
